<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<title>模态窗口</title>
<link href="css/modal-frame.css" rel="stylesheet">
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/modal-frame.js"></script>
<style type="text/css">
.global{width:500px;margin:10px auto;height:500px;position:relative;background:#FFF}
</style>
</head>
<body style="margin:10px">

	<!--从右向左滑动 -->
    <div style="display:inline-block">
        <button type="button" data-toggle="modal" data-target="#myModal">
            从右向左滑动
        </button>
    </div>
    <div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="animated bounceInRight global">
            <div>
            添加内容
            </div>
        </div>
    </div>
	<!--从右向左滑动end -->
                  
                    
	<!--从上向下滑动 -->
    <div style="display:inline-block">
        <button type="button" data-toggle="modal" data-target="#myModa2">
            从上向下滑动
        </button>
    </div>
    <div class="modal inmodal fade" id="myModa2" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="modal-dialog global">
             <div>
             添加内容
            </div>
        </div>
    </div>
    <!--从上向下滑动end -->
    
    
    <!-- 沿X轴转动 -->                  
	<div style="display:inline-block">
    <button type="button" data-toggle="modal" data-target="#myModa3">
        沿X轴转动
    </button>
    </div>
    <div class="modal inmodal" id="myModa3" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="animated flipInY global">
            <div>
            添加内容
            </div>
        </div>
    </div>
    <!--沿X轴转动end -->

	
    <!--淡入效果 -->
	<div style="display:inline-block">
    <button type="button" data-toggle="modal" data-target="#myModa4">
        淡入效果
    </button>
    </div>
    <div class="modal inmodal" id="myModa4" tabindex="-1" role="dialog"  aria-hidden="true">
        <div class="animated fadeIn global">
            <div>
            添加内容
            </div>
        </div>
    </div>
    <!--淡入效果end -->
    
    
</body>
</html>